<template>
  <div style="width: 80%; height: 100vh; margin: 0 auto">
    <div id="mapDom" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted } from 'vue'
import china from '@/assets/china.json'
import * as echarts from 'echarts'
import request from '@/utils/request8085'

const dataList = ref([])
const mapEcharts = () => {
  let initMap = echarts.init(document.querySelector('#mapDom'))
  echarts.registerMap('china', china)
  let options = {
    title: {
      sublink:
        'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} (状态)'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 1,
      max: 6,
      text: ['重度污染', '优'],

      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [
      {
        name: '中国',
        type: 'map',
        map: 'china',
        label: {
          show: false
        },
        data: dataList.value
      }
    ]
  }
  initMap.setOption(options)
}
const fetchData = async () => {
  try {
    const response = await request.get('/stat/query/province')
    dataList.value = response.data
    nextTick(() => {
      mapEcharts()
    })
  } catch (error) {
    console.error('Failed to fetch data:', error)
  }
}
onMounted(() => {
  fetchData()
})
</script>
<style></style>
